
@import "tailwindcss";

@theme {
  /* 定义自定义颜色 */
  --color-primary: #003891;
  --color-primary-100: #e6eef9;
  --color-primary-300: #9fb9e6;
  --color-primary-500: #003891;
  /* 你的主要品牌色 */
  --color-secondary: #005A9E;
  --color-secondary-500: #005A9E;
  --color-secondary-dark: #004A8F;
  --color-text-default: #6b7280;
}

/* 3. 添加你的全局基础样式 */
@layer base {
  html {
    scroll-behavior: smooth;
    height: 100%;
  }

  body {
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    background-color: #ffffff;
    /* 白色背景 */
    color: var(--color-text-default);
    /* 使用自定义灰色文字 */
    margin: 0;
    padding: 0;
    height: 100%;
  }

  /* 可选：设置链接颜色 */
  a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.2s ease;
  }

  a:hover {
    color: var(--color-secondary);
  }
}
    /* 根节点需要有高度，避免 100% 计算为 0 */
    #root { height: 100%; }

    .app {
      min-height: 100vh;
      /* 预留出固定导航高度，避免内容被覆盖 */
      padding-top: 64px;
      width: 100%;
      font-family: 'DM Sans', sans-serif;
      @apply text-gray-500;
    }
    
/* 4. (可选) 使用 @layer components 或 @layer utilities 定义自定义组件或工具类 */
/* @layer components {
  .btn-primary {
    @apply bg-primary text-white px-4 py-2 rounded hover:bg-secondary transition;
  }
} */